const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const pages = [
    'index','userList','login'
]
function htmlPlugin() {
    return pages.map(item => {
        return new HtmlWebpackPlugin({
            template: `./src/${item}.html`,
            filename: `${item}.html`,
            chunks: [item],
        })
    })
}
function entryPath() {
    const entry = {};
    pages.forEach(item => {
        entry[item] = `./src/js/${item}.js`;
    });
    return entry;
}
module.exports={
    mode:'development',
    entry: {
        ...entryPath()
    },
     //用于配置文件打包后生成的新文件的路径和名称
     output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].js' //文件名
    },
    plugins: [
       ...htmlPlugin()
    ],
    devServer: {
        port: 8888, //端口号
        open: true, //启动服务器自动打开页面
        hot:true
    //     proxy:{
    //         '/api':{
    //             target:'http://127.0.0.1:3002',
    //             pathRewrite: { "^/api": "/" }
    //         }
    //     }
     },
    // 配置常用css或js路径别名
    resolve: {
        alias: {
            '@css': path.resolve(__dirname, './src/css'),
            '@js': path.resolve(__dirname, './src/js'),
            '@utils': path.resolve(__dirname, './src/js/utils')
        }
    },
    module: {
        rules: [
			{
                test:/\.css$/i,
                use:['style-loader','css-loader']
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            },
            {
                test: /\.(png|jpg|jpeg|webp|gif)$/i,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 1024 * 8, // 8kb 以下的图片都采用 base64 处理
                        outputPath: './image', // 图片的出口路径
                        esModule: false
                    },
                }]
            },
            // HTML中图片的打包规则
            {
                test: /\.html$/i,
                use: ['html-withimg-loader']
            },
        ]
    }
}